<template>
  <div
    ref="varTreeNodeRow"
    class="v-simulation-operation _panel-content-wrapper"
  >
    <var-table
      indragging
      :columns="variableService.columns"
      :rows="variableService.variableData"
      @toggle-expand="(_expand, row) => variableService.variableDataExpand(row)"
      @contextmenu="
        (event, row, item, col) =>
          variableService.variableContextMenu(event, row, item, col)
      "
    >
      <template #name="{ row }">
        <icon-button
          no-padding
          :label="row.name"
          :icon="row.icon"
          :label-size="11"
          text-nowrap
        >
          <!-- 显示约束 -->
          <template #label>
            <span class="node-name">{{ row?.name }}</span>
            <span class="node-expression">{{ row?.expression }}</span>
          </template>
        </icon-button>
      </template>
      <template #value="{ row }">
        <value-col :row="row" />
      </template>
      <template #validationReq="{ row }">
        <icon-button
          v-if="!row.isRoot"
          no-padding
          :label="row.name"
          :icon="row.icon"
          :label-size="11"
        />
        <span :style="{ 'font-size': '11px' }">{{
          row.valid ? "已被满足" : "未满足"
        }}</span>
      </template>
      <template #reqContent="{ row }">
        <span v-if="!row.isRoot">{{ row.value }}={{ row.name }}</span>
      </template>
    </var-table>
  </div>
</template>
<script lang="ts" setup>
import { reactive, provide, ref } from "vue";
import { controller } from "@/engine/Controller";
import { TreeNodeDrag } from "@/engine/types/variable";
import IconButton from "@/components/IconButton/IconButton.vue";

import VarTable from "./comps/VarTable/Table.vue";
import ValueCol from "./comps/ValueCol.vue";
// import VariableNode from './VariableNode.vue';

const TreeNodeDragItem = reactive(new TreeNodeDrag()) as TreeNodeDrag;

provide("TreeNodeDragItem", TreeNodeDragItem);

const varTreeNodeRow = ref();
const variableService = controller.variableService;
</script>
<style lang="scss">
.v-simulation-operation {
  height: calc(100% - 2px);

  &._panel-content-wrapper {
    ._input {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }

  ._panel-content {
    padding: 4px 16px;
    overflow: auto;
    max-height: calc(100% - 40px);

    .__log-time {
      color: #969899;
    }
  }

  .node-expression {
    padding: 4px;
    color: rgba($color: #000000, $alpha: 0.45);
  }
}
</style>
